<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'管廊维保管理'"
      :secondTitles="['维保任务类别', '工单逾期情况']"
      :slot-width="[50, 50]"
    >
      <template #left>
        <div class="w-100 h-100">
          <wbrwlb :year="left_year_value"/>
        </div>
      </template>
      <template #middle>
        <div class="w-100 h-100">
          <gdyqqk :year="middle_year_value" />
        </div>
      </template>

      <template #left_control>
        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="2024"
          v-model:select-value="left_year_value"
          :width="100"
        >
        </proSelect>
      </template>

      <template #middle_control>
        <proSelect
          :optionsData="useOptions().year()"
          :defaultSelectValue="2024"
          v-model:select-value="middle_year_value"
          :width="100"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import wbrwlb from "./wbrwlb.vue";
import gdyqqk from "./gdyqqk.vue";
import { useOptions } from "@/hook/useOptions";
const left_year_value = ref(2024);
const middle_year_value = ref(2024);
</script>

<style scoped lang="less"></style>
